<template>
  <div class="app">
    <el-row :gutter="10">
      <el-col :span="5">
        <div id="checkReport" class="side">
          <p class="side-title">公司列表</p>
          <div class="search-bar">
            <el-input placeholder="输入公司名称" v-model="filterCompany" size="small"></el-input>
          </div>
          <div class="tree-box">
            <el-tree ref="tree"
              highlight-current
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :filter-node-method="filterNode">
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="content">
          <div class="content-title">
            <p>产权系统数据</p>
            <p>企智系统数据</p>
          </div>
          <div class="type-title"><cm-icon class="icon-menu"/>基础信息差异</div>
          <div class="type-content">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form ref="form" label-width="140px" id="form">
                  <el-form-item v-if="registerSystem.registerType" label="注册类型：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.registerType==='null'?'':registerSystem.registerType }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.registerAddress" label="注册地址：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.registerAddress==='null'?'':registerSystem.registerAddress }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.registeredCapitalOc" label="注册资本(原币)：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.registeredCapitalOc==='null'?'':registerSystem.registeredCapitalOc }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.operName" label="法定代表人：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.operName==='null'?'':registerSystem.operName }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.endDate" label="营业期限至：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.endDate==='null'?'':registerSystem.endDate }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.status" label="经营状况：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.status==='null'?'':registerSystem.status }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.organizationCode" label="组织机构代码：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.organizationCode==='null'?'':registerSystem.organizationCode }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.socialCreditCode" label="统一社会信用代码：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.socialCreditCode==='null'?'':registerSystem.socialCreditCode }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.countryBusinessType" label="行业：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.countryBusinessType==='null'?'':registerSystem.countryBusinessType }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.startDate" label="开始日期：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.startDate==='null'?'':registerSystem.startDate }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.businessRange" label="经营范围：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.businessRange==='null'?'':registerSystem.businessRange }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerSystem.businessAddress" label="经营地址：" style="margin-bottom: 5px">
                    <span>{{ registerSystem.businessAddress==='null'?'':registerSystem.businessAddress }}</span>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form ref="form" label-width="140px" id="form">
                  <el-form-item v-if="registerAisp.registerType" label="注册类型：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.registerType==='null'?'':registerAisp.registerType }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.registerAddress" label="注册地址：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.registerAddress==='null'?'':registerAisp.registerAddress }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.registeredCapitalOc" label="注册资本(原币)：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.registeredCapitalOc==='null'?'':registerAisp.registeredCapitalOc }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.operName" label="法定代表人：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.operName==='null'?'':registerAisp.operName }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.endDate" label="营业期限至：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.endDate==='null'?'':registerAisp.endDate }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.status" label="经营状况：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.status==='null'?'':registerAisp.status }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.organizationCode" label="组织机构代码：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.organizationCode==='null'?'':registerAisp.organizationCode }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.socialCreditCode" label="统一社会信用代码：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.socialCreditCode==='null'?'':registerAisp.socialCreditCode }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.countryBusinessType" label="行业：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.countryBusinessType==='null'?'':registerAisp.countryBusinessType }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.startDate" label="开始日期：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.startDate==='null'?'':registerAisp.startDate }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.businessRange" label="经营范围：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.businessRange==='null'?'':registerAisp.businessRange }}</span>
                  </el-form-item>
                  <el-form-item v-if="registerAisp.businessAddress" label="经营地址：" style="margin-bottom: 5px">
                    <span>{{ registerAisp.businessAddress==='null'?'':registerAisp.businessAddress }}</span>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
          <div class="type-title" v-if="govermentData.length"><cm-icon class="icon-menu"/>治理机构</div>
          <div class="type-content">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form label-width="140px" id="form">
                  <div v-for="item in govermentData" :key="item.id">
                    <el-form-item v-if="item.system != 'null'"  :label="item.name+'：'" style="margin-bottom: 0px">
                      <span>{{item.system}}</span>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form label-width="140px" id="form">
                  <div v-for="item in govermentData" :key="item.id">
                    <el-form-item v-if="item.qizhi != 'null'" :label="item.name+'：'" style="margin-bottom: 0px">
                      <span>{{item.qizhi}}</span>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
            </el-row>
          </div>
          <div class="type-title" v-if="shareData.length"><cm-icon class="icon-menu"/>股东出资</div>
          <div class="type-content">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form label-width="100px" id="form">
                  <div v-for="item in shareData" :key="item.id">
                    <el-form-item v-if="item.system!='null'" label="股东名称：" style="margin-bottom: 5px">
                      <span>{{item.name}}</span>
                      <span style="margin-left: 5px">{{item.difItem==='paidShareOc'?'实缴出资':'认缴出资'}}</span>
                      <span style="margin-left: 5px">{{item.system}}</span>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form label-width="100px" id="form">
                  <div v-for="item in shareData" :key="item.id">
                    <el-form-item v-if="item.qizhi!='null'" label="股东名称：" style="margin-bottom: 5px">
                      <span>{{item.name}}</span>
                      <span style="margin-left: 5px">{{item.difItem==='paidShareOc'?'实缴出资':'认缴出资'}}</span>
                      <span style="margin-left: 5px">{{item.qizhi}}</span>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryCheckReportCompany, queryCheckReportDetail } from '@/api/modules/checkTask.js'
export default {
  watch: {
    filterCompany(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [],
      registerSystem: {},
      registerAisp: {},
      govermentData: [],
      shareData: [],
      filterCompany: '',
      saveId: {}
    }
  },
  mounted() {
    this.saveId = this.$route.query
    this.initData()
  },
  methods: {
    initData() {
      queryCheckReportCompany(this.saveId).then(res => {
        if (res.data.code === '200') {
          const arr = res.data.data
          const newArr = []
          arr.map(item => {
            const obj = {
              label: item.companyName,
              id: item.companyCode
            }
            newArr.push(obj)
          })
          this.treeData = newArr
        }
      })
    },
    handleNodeClick(val) {
      const params = {
        companyCode: val.id,
        auditId: this.saveId.auditId
      }
      queryCheckReportDetail(params).then(res => {
        if (res.data.code === '200') {
          this.registerSystem = res.data.data.registerSystem
          this.registerAisp = res.data.data.registerAisp
          this.govermentData = res.data.data.management
          this.shareData = res.data.data.stock
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: 100%;
    .side {
      background-color: #ffffff;
      height: calc(100vh - 70px);
      .side-title {
        padding: 10px 10px;
        font-size: 16px;
      }
      .search-bar {
        padding: 5px 10px;
      }
      .tree-box {
        height: calc(100vh - 155px);
        overflow: auto;
        overflow-x: hidden;
        min-width: 230px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .content {
      height: calc(100vh - 70px);
      background-color: #ffffff;
      overflow: auto;
      overflow-x: hidden;
      .content-title {
        padding: 10px 0;
        display: flex;
        justify-content: space-around;
        p {
          font-size: 16px;
        }
      }
      .type-title {
        color: #777777;
        margin-bottom: 20px;
        padding: 0 30px;
      }
      .type-content {
        padding-left: 40px;
        width: calc(100% - 40px);
        margin-bottom: 20px;
        .goverment-box {
          display: flex;
          justify-content: space-between;
          width: 30%;
          margin-left: 50px;
          padding: 10px 0px;
        }
      }
    }
  }
</style>
<style lang="less">
  #form .el-form-item__content {
    line-height: 20px;
    margin-top: 10px;
  }
  #checkReport {
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
      background-color: rgba(0,0,0,0.1);
    }
  }
</style>